<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="back-btn">←</text>
      </view>
      <view class="header-center">
        <text class="header-title">设置</text>
      </view>
      <view class="header-right"></view>
    </view>
    
    <!-- 设置内容区域 -->
    <view class="settings-content">
      <!-- 账号与安全设置 -->
      <view class="settings-section">
        <view class="section-title">账号与安全</view>
        <view class="menu-item" @click="changePassword">
          <view class="menu-icon">🔒</view>
          <view class="menu-text">修改密码</view>
          <view class="menu-arrow"></view>
        </view>
      </view>
      
      <!-- 通知设置 -->
      <view class="settings-section">
        <view class="section-title">通知设置</view>
        <view class="menu-item">
          <view class="menu-icon">🔔</view>
          <view class="menu-text">推送通知</view>
          <switch :checked="notificationSettings.pushEnabled" @change="toggleNotification('pushEnabled')"></switch>
        </view>
        <view class="menu-item">
          <view class="menu-icon">💬</view>
          <view class="menu-text">消息提醒</view>
          <switch :checked="notificationSettings.messageEnabled" @change="toggleNotification('messageEnabled')"></switch>
        </view>
      </view>
      
      <!-- 其他设置 -->
      <view class="settings-section">
        <view class="section-title">其他</view>
        <view class="menu-item" @click="clearCache">
          <view class="menu-icon">🗑️</view>
          <view class="menu-text">清除缓存</view>
          <view class="cache-size">{{ cacheSize }}</view>
        </view>
        <view class="menu-item" @click="aboutApp">
          <view class="menu-icon">ℹ️</view>
          <view class="menu-text">关于应用</view>
          <view class="menu-arrow"></view>
        </view>
      </view>
      
      <!-- 退出登录按钮 -->
      <view class="logout-container">
        <button class="logout-btn" @click="logout">退出登录</button>
      </view>
      
      <!-- 版本信息 -->
      <view class="version-info">
        <text class="version-text">版本 1.0.0</text>
      </view>
    </view>
  </view>
</template>

<script>
import { AuthService } from '../../utils/auth.js';

export default {
  data() {
    return {
      notificationSettings: {
        pushEnabled: true,
        messageEnabled: true
      },
      cacheSize: '23.5MB' // 模拟缓存大小
    };
  },
  onLoad() {
    // 在实际应用中，这里可以加载用户的设置偏好
    this.loadSettings();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    loadSettings() {
      // 模拟从本地存储加载设置
      console.log('加载设置');
    },
    toggleNotification(key) {
      this.notificationSettings[key] = !this.notificationSettings[key];
      uni.showToast({
        title: '设置已保存',
        icon: 'success'
      });
    },
    changePassword() {
      uni.showToast({
        title: '修改密码功能开发中',
        icon: 'none'
      });
    },
    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定要清除所有缓存数据吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟清除缓存
            setTimeout(() => {
              this.cacheSize = '0KB';
              uni.showToast({
                title: '缓存已清除',
                icon: 'success'
              });
            }, 500);
          }
        }
      });
    },
    aboutApp() {
      uni.navigateTo({
        url: '/pages/mine/aboutApp'
      });
    },
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 使用AuthService清除登录信息
            AuthService.logout();
            
            // 跳转到登录页面
            uni.navigateTo({
              url: '/pages/auth/login'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left,
.header-right {
  width: 60rpx;
  text-align: center;
}

.header-center {
  flex: 1;
  text-align: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.back-btn {
  font-size: 48rpx;
  color: #333;
}

/* 设置内容样式 */
.settings-content {
  padding: 20rpx;
}

.settings-section {
  background-color: white;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #999;
  background-color: #f8f8f8;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  font-size: 40rpx;
  margin-right: 30rpx;
  width: 48rpx;
  text-align: center;
}

.menu-text {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.menu-arrow {
  width: 0;
  height: 0;
  border-left: 12rpx solid #999;
  border-top: 12rpx solid transparent;
  border-bottom: 12rpx solid transparent;
}

.cache-size {
  font-size: 28rpx;
  color: #999;
}

/* 退出登录按钮样式 */
.logout-container {
  padding: 40rpx 30rpx;
}

.logout-btn {
  background-color: #fff;
  color: #ff4d4f;
  font-size: 34rpx;
  border-radius: 16rpx;
  border: 1rpx solid #ff4d4f;
}

/* 版本信息样式 */
.version-info {
  text-align: center;
  padding: 40rpx 0;
}

.version-text {
  font-size: 28rpx;
  color: #999;
}
</style>